<template>
  <el-dialog
    :visible.sync="interalVisible"
    :size="size"
    :title="title"
    :width="width"
    modal
    class="dialog-layout"
    modal-append-to-body
    append-to-body
    lock-scroll
    show-close
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <slot />
    <div slot="footer">
      <el-button :size="size" @click="closeDialog">{{ L('Cancel') }}</el-button>
      <el-button
        type="primary"
        :size="size"
        :loading="dialogLoading"
        @click="saveDialog"
      >
        <svg-icon icon-class="save" /> {{ L('OK') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import waves from '@/directive/waves' // waves directive
export default {
  directives: { waves },
  props: {
    size: {
      type: String,
      default: 'small'
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      interalVisible: false,
      dialogLoading: false
    }
  },
  watch: {
    visible(val) {
      this.interalVisible = val
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
    },
    saveDialog() {
      this.dialogLoading = true
      this.$emit('save', async saveHandle => {
        await saveHandle().finally(() => {
          this.dialogLoading = false
        })
        this.$message({
          type: 'success',
          message: this.L('SavedSuccessfully')
        })
        this.$emit('update:visible', false)
      })
    }
  }

}
</script>

